<template>
	<view class="myFavorites">
		<view class="favorite-item" @click="navigateTo(item.page)" v-for="(item, index) in favoriteList" :key="index">
			<image :src="`/static/${item.img}`" mode="widthFix"></image>
			<text>{{ item.text }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				favoriteList: [{
						img: 'user/originator.png',
						text: '创作者',
						page: '/pages/content/creator/creator'
					},
					{
						img: 'user/dynamic.png',
						text: '动态',
						page: '/pages/content/dynamic/dynamic'
					},
					{
						img: 'user/PaymentWork.png',
						text: '我付款的作品',
						page: '/pages/content/purchased/purchased'
					},
					// {
					// 	img: 'kbblnt.jpg',
					// 	text: '已下载的音频',
					// 	page: '/pages/content/downloaded/downloaded'
					// }
				]
			}
		},
		methods: {
			// 您可以在这里添加方法
			navigateTo(page) {
				uni.navigateTo({
					url: page
				});
			}
		}
	}
</script>

<style>
	page {
		height: auto;
		border: 1px white solid;
	}

	.myFavorites {
		overflow: hidden;
		width: 90%;
		margin: 60rpx auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		/* 垂直居中子项 */
	}

	.favorite-item {
		background-color: #fff9f4;
		width: 49%;
		/* 使得两个item加上间隙后能够在一行显示 */
		height: 324rpx;
		margin-bottom: 10px;
		/* 添加一些底部外边距 */
		display: flex;
		/* 使用flex布局 */
		flex-direction: column;
		/* 子项垂直排列 */
		align-items: center;
		/* 子项内容水平居中 */
		justify-content: center;
		/* 子项内容垂直居中 */
	}

	/* #ifdef MP-WEIXIN */
	.favorite-item {
		height: 300rpx;
	}

	/* #endif */
	image {
		width: 100rpx;
		/* 设置图片宽度 */
		height: 100rpx;
		/* 设置图片高度 */
		border-radius: 10%;
		/* 设置图片为圆形 */
	}

	text {
		color: #ff6600;
		margin-top: 10px;
		/* 在图片和文本之间添加一些间隔 */
	}
</style>